import React, { Component } from 'react';
import { View, Text } from 'react-native';
import { ListItem, Input } from 'react-native-elements';
import { colors } from 'react-native-elements/src/config';

class ListInputs extends Component {

    state = {
        name: '',
        sexLabel: '',
        sex: ''
    }

    render() {

        const { name, sexLabel, sex } = this.state

        return (
            <View>
                <ListItem
                    leftElement={<Text style={{ fontSize: 18, width: 60 }}>姓名</Text>}
                    input={{
                        value: name,
                        onChangeText: v => this.setState({ name: v }),
                        placeholder: '请输入姓名',
                        inputStyle: {
                            fontSize: 16,
                            padding: 0,
                            textAlign: 'left'
                        },
                        clear: true
                    }}
                    containerStyle={{
                        height: 64
                    }} />
                <ListItem
                    leftElement={<Text style={{ fontSize: 18, width: 60 }}>性别</Text>}
                    title={sexLabel || '请选择性别'}
                    titleStyle={{
                        color: sex ? '#000' : colors.grey3
                    }}
                    rightIcon={{
                        type: 'ionicon',
                        name: 'md-close-circle',
                        color: colors.grey3
                    }}
                    onPress={() => {
                        this.setState({
                            sex: '1',
                            sexLabel: '男'
                        })
                    }}
                    containerStyle={{
                        height: 64
                    }} />
            </View>
        )
    }
}

export default ListInputs;